{% extends 'shop/base.html' %}

{% block title %}购物车{% endblock %}

{% block content %}
<h1 class="mb-6 text-3xl">购物车</h1>

<div class="grid grid-cols-5 gap-6">
{% if cart_items %}
    {% for cart in cart_items %}
    <div class="col-span-3 space-y-6">
        <a href="{% url 'item:detail' cart.item.id %}">
            <div class="p-6 flex bg-gray-100 rounded-xl">
                <div class="pr-6">
                    <img src="{{ cart.item.image.url }}" class="w-20 rounded-xl">
                </div>
                <div>
                    <p class="mb-4">{{ cart.item.name }} (卖家：{{ cart.item.created_by }})</p>
                    <p>价格：{{ cart.item.price }} 元</p>
                </div>
            </div>
        </a>
    </div>
    <div class="col-span-2 space-y-6">
        <div class="p-6 flex rounded-xl">
            <p class="py-4 px-8">数量：{{ cart.quantity }}</p>
            <form action="{% url 'cart_delete' cart.id %}" method="post">
                {% csrf_token %}
                <button class="py-4 px-8 font-semibold bg-red-500 hover:bg-red-700 text-white rounded-xl">移除商品</button>
            </form>
        </div>
    </div>
    {% endfor %}
    <div class="col-span-3 space-y-6">
        <div class="p-6 flex">
            <p class="py-4 px-8">总价：{{ total_price }} 元</p>
        </div>
    </div>
    <div class="col-span-2 space-y-6">
        <div class="p-6 flex rounded-xl">
            <a href="{% url 'checkout' %}" class="py-4 px-8 font-semibold bg-green-500 hover:bg-green-700 text-white rounded-xl">结账</a>
        </div>
    </div>
{% else %}
    <h4>购物车是空的</h4>
{% endif %}
</div>
{% endblock %}